<!-- 装修用户组件：用户卡片 -->
<template>
  <view class="ss-user-info-wrap">
    <view class="ss-flex ss-col-center ss-row-center ss-m-b-20 avatar-flc">
      <view class="left-box ss-col-center" style="display: flex">
        <view class="avatar-box ss-m-r-24" style="flex: 1; margin-left: 30rpx">
          <image
            class="avatar-img"
            :src="
              isLogin
                ? sheep.$url.cdn(userInfo.avatar)
                : sheep.$url.static('/static/img/shop/default_avatar.png')
            "
            mode="aspectFill"
            @tap="sheep.$router.go('/pages/user/info')"
          ></image>
        </view>
        <view style="width: 200rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
          <view
            class="nickname-box ss-flex ss-col-center ss-row-center;width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
          >
            <view
              class="nick-name"
              style="width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
              >{{ userInfo?.nickname || nickname }}</view
            >
          </view>
          <!--              糖积分不做先隐藏-->
          <!--          <view class="tang-mark-box"><span class="tang-mark-title">糖积分</span><span class="tang-mark-number">{{tangMark}}</span></view>-->
        </view>
      </view>
      <view class="under-box">
        <view class="under-box-left">
          <image src="/static/lineUp.png" class="line-up-img"></image>
        </view>
        <view class="under-box-right">
          <view :class="status === 1 ? 'wait-team-green' : 'wait-team'">
            {{ deviceName }}
          </view>
          <view class="wait-team">
            {{ $t('components.userCardNew.orderLabel') }}:{{ currentOrderId }}
          </view>
          <view class="total-box">
            <view class="wait-people-total">{{ ren }}</view>
            <view class="ren">REN</view>
          </view>
          <view class="wait-team"> -{{ $t('components.userCardNew.queueStatus') }}- </view>
        </view>
      </view>
      <!-- 	<view class="right-box ss-m-r-52">
				<button class="ss-reset-button" @tap="showShareModal">
					<text class="sicon-qrcode"></text>
				</button>
			</view> -->
    </view>

    <!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
    <!-- 		<view
      class="bind-mobile-box ss-flex ss-row-between ss-col-center"
      v-if="isLogin && !userInfo.mobile"
    >
      <view class="ss-flex">
        <text class="cicon-mobile-o" />
        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
      </view>
      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
    </view> -->
  </view>
</template>

<script setup>
  /**
   * 用户卡片
   *
   * @property {Number} leftSpace 									- 容器左间距
   * @property {Number} rightSpace 									- 容器右间距
   *
   * @property {String} avatar 					- 头像
   * @property {String} nickname 					- 昵称
   * @property {String} vip		  				- 等级
   * @property {String} collectNum 				- 收藏数
   * @property {String} likeNum 					- 点赞数
   *
   *
   */
  import { computed, ref, onUnmounted, onMounted } from 'vue';
  import sheep from '@/sheep';
  import MessageApi from '@/sheep/api/print/message';
  import { showAuthModal } from '@/sheep/hooks/useModal';
  import { t } from '@/i18n/solveSetup';

  // 用户信息
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const deviceId = computed(() => sheep.$store('device').deviceId).value;

  const deviceName = ref(t('components.userCardNew.unknownDevice'));
  const status = ref('');
  const currentOrderId = ref(t('components.userCardNew.no'));
  // 是否登录
  const isLogin = computed(() => sheep.$store('user').isLogin);

  // 接收参数
  const props = defineProps({
    background: {
      type: String,
      default: '',
    },
    // 头像
    avatar: {
      type: String,
      default: '',
    },
    nickname: {
      type: String,
      default: t('components.userCardNew.pleaseLogin'),
    },
    vip: {
      type: [String, Number],
      default: '1',
    },
    collectNum: {
      type: [String, Number],
      default: '1',
    },
    likeNum: {
      type: [String, Number],
      default: '1',
    },
  });
  const tangMark = ref(200);
  function onBind() {
    showAuthModal('changeMobile');
  }
  const ren = ref(0); //人数
  let queueLoop = null;
  //进来先执行一遍
  MessageApi.getWaitPrintList(deviceId).then((res) => {
    ren.value = res.data.total;
  });

  //获取设备信息
  sheep
    .$store('device')
    .getDeviceInfo()
    .then((res) => {
      deviceName.value = res.name;
      if (res.orderId) {
        currentOrderId.value = res.orderId;
      }
    });

  onUnmounted(() => {
    clearInterval(queueLoop);
    queueLoop = null;
  });
  onMounted(() => {
    if (!isLogin.value) {
    }
    //轮询刷新排队人数
    queueLoop = setInterval(() => {
      MessageApi.getWaitPrintList(deviceId).then((res) => {
        ren.value = res.data.total;
      });
    }, 10000);
  });
</script>

<style lang="scss" scoped>
  .ss-user-info-wrap {
    box-sizing: border-box;

    .avatar-box {
      margin-top: 10px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      border: 6rpx solid #fae45e;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      .avatar-img {
        width: 100%;
        height: 100%;
      }
    }

    .nick-name {
      font-size: 17px;
      font-weight: 600;
      color: #333333;
      line-height: normal;
    }

    .vip-img {
      width: 15px;
      height: 15px;
    }

    .sicon-qrcode {
      font-size: 20px;
    }
  }

  .bind-mobile-box {
    width: 100%;
    height: 42px;
    padding: 0 17px 0 22px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px -4px 5px 0px rgba(#e0e0e0, 0.3);

    .cicon-mobile-o {
      font-size: 15px;
      color: #ff690d;
    }

    .mobile-title {
      font-size: 12px;
      font-weight: 500;
      color: #ff690d;
    }

    .bind-btn {
      width: 50px;
      height: 25px;
      background: #ff6100;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      color: #ffffff;
    }
  }
  .tang-mark-box {
    margin-top: 5px;
    background: #e7e7e7;
    display: inline-block;
    border-radius: 25px;
    padding: 2px 5px;
    .tang-mark-title {
      color: #6e6e6e;
    }
    .tang-mark-number {
      color: #fe7702;
    }
  }
  .avatar-flc {
    flex-direction: column;
  }
  .under-box {
    display: flex;
    align-content: center;
    justify-content: space-around;
    width: 100%;
    margin-top: 20px;
    .under-box-left {
      width: 75px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 10px;
      .line-up-img {
        width: 30px;
        height: 30px;
      }
    }
    .under-box-right {
      flex: 1;
      margin-left: -15px;
      .total-box {
        display: flex;
        justify-content: center;
        align-items: center;
        .wait-people-total {
          font-size: 25px;
          font-weight: 600;
          margin-right: 5px;
          color: #fd7700;
        }
        .ren {
          margin-top: 3px;
          display: inline-block;
          background: #fae45d;
          font-size: 13px;
          font-weight: 700;
          padding: 1px 5px;
          border-radius: 10px;
          color: #fff;
        }
      }
      .wait-team {
        text-align: center;
        font-size: 13px;
        font-weight: 500;
        color: #8f8f8f;
      }
      .wait-team-green {
        text-align: center;
        font-size: 13px;
        font-weight: 500;
        color: #00fd59;
      }
    }
  }
</style>
